import React from 'react';
import { DatePicker, Space , Select,Button,Input} from 'antd';
import moment from 'moment';
import './home.css'
import Table1 from'../components/table.js'
//路由
import {HashRouter,Route,Link} from 'react-router-dom'
import Build from '../router/build.js'

//date
const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';

//select
const { Option } = Select;
function onChange(value) {
    console.log(`selected ${value}`);
  }
  
  function onBlur() {
    console.log('blur');
  }
  
  function onFocus() {
    console.log('focus');
  }
  
  function onSearch(val) {
    console.log('search:', val);
  }



class Home extends React.Component{
    render(){
        return (
          <HashRouter>
            <div className='main-home'>
                <div className='main-home-header'>

            <div className="thing">
                <div>事件名称：</div>
                <Input placeholder="Basic usage" />
            </div>
            <div className="date">
                <div>日期筛选：</div>
                <Space direction="vertical" size={12}>
    
    <RangePicker
      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
      format={dateFormat}
    />
  </Space>
            </div>
            <div className="thing-type">
                <div>事件类型：</div>
                <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>
            </div>

            <div className="person-name">
                <div>人员名称：</div>
                <Input placeholder="Basic usage" />
            </div>

            {/* //button */}
            
            <div className="header-button">
            <Button type="primary" >查询</Button>
            <Button type="primary" ><Link to="/build">新建</Link></Button>
            </div>

            </div>
            {/* //table */}
            <div className="main-home-table">
            <Table1 />
            </div>
            </div>
            {/* 详情路由 */}
            <Route path="/build" component={Build} /> 
            </HashRouter>
        )
    }
}

export default Home;